*{
    /*页面初始化 清除元素的内外边距*/
    padding: 0;
    margin: 0;

}

body {
display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    background-color: #00034b;
}

.container .ghost {

    position: relative;

    width: 150px;

    height: 225px;

    border-radius: 75px 75px 0 0;

    background-color:#fff;

    box-shadow: -17px 0 0 #dbdbdb inset,0 0 50px #5939db;

    animation: ghost 2s infinite;
}

.container .ghost .ghostEyes {
    display: flex;

    justify-content: space-around;

    width: 90px;

    padding-top: 70px;

    margin: 0 auto;
}

.container .ghost .ghostEyes::before,.container .ghost .ghostEyes::after {

    content: "";

    width: 15px;

    height: 25px;

    border-radius: 50%;

    background-color: #00034b;

}

.container .ghost .ghostDimples {
    display: flex;

    justify-content: space-around;

    /*此处表示该弹性盒的宽度为120px*/
    width:120px ;

    padding-top: 10px;

    margin: 0 auto;
}

.container .ghost .ghostDimples::before,.container .ghost .ghostDimples::after {

    content: "";

    width: 20px;

    height: 10px;

    border-radius: 50%;

    background-color: lightpink;
}

.container .ghost .ghostFeet {

    display: flex;
    /*绝对定位*/
    position: absolute;

    bottom: -13px;

    width: 100%;

}

.container .ghost .ghostFeet .ghostFoot {

    width: 25%;

    height: 26px;

    border-radius: 50%;

    background-color: #fff;

}

.container .ghost .ghostFeet .ghostFoot:last-child {
    /*使用背景渐变色实现从左到右显示阴影*/
    background-image: linear-gradient(to right,#fff 55%,#dbdbdb 45%);
}

.container .shadow {

    width: 150px;

    height: 40px;

    margin-top: 50px;

    border-radius: 50%;

    background-color: #000232;

    animation: shadow 2s infinite;
}

@keyframes ghost {
    0%,
    100% {

        transform: translateY(0);

    }
    50% {

        transform: translateY(-15px);
    }

}

@keyframes shadow {

    0%,
    100% {

        transform: scale(1);

    }

    50% {

        transform: scale(0.9);
    }

}